<template>
    <div>
        <template v-if="itemList.length > 0">
            <div class="bottom-right-items" v-for="(item , index) in itemList" :key="index">
                <div class="title_con">
                    <p v-if="type == 'info'">
                        <span :title="item.notice" @click="zbdtTitleClick(item)">{{item.notice}}</span>
                    </p>

                    <p v-if="type == 'plan'">
                        <span :title="item.docname" @click="planTitleClick(item)">{{item.docname}}</span>
                    </p>

                    <div v-if="type == 'info'">
                        <span style="color:#909399;">{{(new Date(item.publishtime - 0 )).pattern("yyyy-MM-dd")}}</span>
                        
                        <collect-star
                            :data="{objectguid: item.guid, objectname: item.notice, objecttype: noticeCollType(item.noticetype), marktype: 'collect',}"
                            :defaultVal="item.bj === '1'"
                            :color="['#FF7C00', '#BFCBD9']"
                        ></collect-star>
                    </div>

                    <div v-if="type == 'plan'">
                        <!-- <span>{{(new Date(item.publishtime - 0 )).pattern("yyyy-MM-dd")}}</span> -->
                        <span>{{item.addtime.split(' ')[0]}}</span>
                        
                        <collect-star
                            :action="`${$store.state.api.tbUrl}/document/doccollect.json`"
                            :data="{guid: item.guid, marktype: 'collect',}"
                            :defaultVal="item.bj === '1'"
                            :color="['#FF7C00', '#BFCBD9']"
                        ></collect-star>
                    </div>
                </div>

                <div class="detail_con">
                    <el-tag 
                    size="mini" 
                    type="info" 
                    v-if="item.area"
                    >
                        {{item.area}}
                    </el-tag>

                    <el-tag 
                    size="mini" 
                    type="info" 
                    v-if="item.industry && item.industry != '未知'"
                    >
                        {{item.industry}}
                    </el-tag>

                    <el-tag 
                    size="mini" 
                    type="info" 
                    v-if="item.noticetype"
                    >
                        {{item.noticetype}}
                    </el-tag>

                    <el-tag 
                    size="mini" 
                    v-if="item.price"
                    >
                        {{Math.floor(item.price)/10000 + '万元'}}
                    </el-tag>
                </div>
            </div>
        </template>

    </div>
</template>

<script>
import notice from '@/mixins/notice.js';

import CollectStar from '@components/sys/collect.vue';

export default {
    mixins: [notice],
    components: {
        CollectStar,
    },
    props: {
        itemList: {
            type: Array,
            default: () => [],
        },
        type: {
            type: String,
            default: 'info',
        },
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {
        zbdtTitleClick: function (data) {
            this.openNotice(data.guid, data.noticetype , true);
        },

        planTitleClick(item) {
            // document + documentguid
            window.open(`/document/${item.guid}`);
        },
    },
};
</script>

<style lang="scss"  scoped>
@import '@css/var.scss';

.bottom-right-items {
    margin-top: 15px;

    &:first-child {
        margin-top: 0;
    }

    .title_con {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
            font-size: 14px;
            font-weight: 600;
            width: 80%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            span {
                cursor: pointer;
            }
        }
        p span:hover {
            color: $primaryColor;
        }
        span {
            margin-right: 10px;
        }
        
        & > div{
            display: flex;
            align-items: center;
        }
    }

    .detail_con {
        margin-top: 8px;
    }
}
</style>
